<!-- src/components/TodoItem.vue -->
<template>
  <li :class="{ done: task.done }">
    <!-- 确保点击事件能正确触发 -->
    <span @click="handleToggle" style="cursor: pointer;">{{ task.text }}</span>
    <button class="del" @click="handleDelete">删除</button>
  </li>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 接收父组件传递的任务数据和索引
const props = defineProps({
  task: {
    type: Object,
    required: true
  },
  index: {
    type: Number,
    required: true
  }
});

// 定义要触发的事件
const emit = defineEmits(['toggle', 'delete']);

// 点击文本时触发切换事件，传递当前索引
const handleToggle = () => {
  emit('toggle', props.index);
};

// 点击删除按钮时触发删除事件，传递当前索引
const handleDelete = () => {
  emit('delete', props.index);
};
</script>